<template>
  <avue-form ref="form" :option="option" v-model="form">
    <template slot-scope="{ disabled, size }" slot="enabled">
      <el-switch :disabled="disabled" size="small" v-model="form.enabled" @change="handleChangeSwitch"></el-switch>
    </template>
    <template slot-scope="{ disabled, size }" slot="isDefaultLoad">
      <el-switch :disabled="disabled" size="small" v-model="form.isDefaultLoad" @change="handleChangeSwitch"></el-switch>
    </template>
  </avue-form>
</template>

<script>
import moment from 'moment';

export default {
  props: {
    formData: {
      type: Object,
      default: () => ({})
    },
    isViewStatus: {
      type: Boolean,
      default: false
    }
  },
  name: 'baseInfoForm',
  watch: {
    formData: {
      handler(val) {
        this.form = this._cloneDeep(this.formData);
      },
      immediate: true
    },
    isViewStatus(val) {
      const column = this._cloneDeep(this.option.column);
      column.forEach((item) => {
        item.disabled = val;
      });
      this.$set(this.option, 'column', column);
    }
  },
  data() {
    return {
      form: this._cloneDeep({ enabled: true, isDefaultLoad: true }, this.formData),
      option: {
        menuPosition: 'right',
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '报表模块',
            prop: 'module',
            type: 'select',
            rules: [
              {
                required: true,
                message: '请选择报表模块',
                trigger: 'blur'
              }
            ],
            disabled: this.isViewStatus,
            span: 16,
            offset: 4,
            labelWidth: 150,
            dicData: [
              {
                label: '报表',
                value: 'REPORT'
              }
            ],
            value: 'REPORT',
            change: (val) => {
              this.$emit('baseInfoChange', this.form);
            }
          },
          {
            label: '报表类型',
            prop: 'type',
            type: 'select',
            span: 16,
            offset: 4,
            labelWidth: 150,
            disabled: this.isViewStatus,
            dicData: [
              {
                label: '表格',
                value: 'GRID'
              }
            ],
            rules: [
              {
                required: true,
                message: '请选择报表类型',
                trigger: 'blur'
              }
            ],
            value: 'GRID',
            change: (val) => {
              this.$emit('baseInfoChange', this.form);
            }
          },
          {
            label: '报表名称',
            span: 16,
            offset: 4,
            labelWidth: 150,
            prop: 'zhCnName',
            disabled: this.isViewStatus,
            rules: [
              {
                required: true,
                message: '请输入报表名称',
                trigger: 'blur'
              }
            ],
            blur: (val) => {
              this.$emit('baseInfoChange', this.form);
            }
          },
          {
            label: '报表编码',
            span: 16,
            offset: 4,
            labelWidth: 150,
            prop: 'code',
            disabled: this.isViewStatus,
            rules: [
              {
                required: true,
                message: '请输入报表编码',
                trigger: 'blur'
              }
            ],
            blur: (val) => {
              this.$emit('baseInfoChange', this.form);
            }
          },
          // {
          //   label: 'url地址',
          //   span: 16,
          //   offset: 4,
          //   labelWidth: 150,
          //   prop: 'url',
          //   disabled: this.isViewStatus,
          //   blur: (val) => {
          //     this.$emit('baseInfoChange', this.form);
          //   }
          // },
          {
            label: '报表序号',
            span: 16,
            offset: 4,
            labelWidth: 150,
            type: 'number',
            prop: 'sequence',
            disabled: this.isViewStatus,
            controls: false,
            blur: (val) => {
              this.$emit('baseInfoChange', this.form);
            },
            rules: [
              {
                required: true,
                message: '输入报表序号',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '是否启用',
            span: 17,
            offset: 4,
            labelWidth: 150,
            prop: 'enabled',
            type: 'switch',
            value: true,
            disabled: this.isViewStatus,
            formslot: true
            // change: (val) => {
            //   this.$emit('baseInfoChange', this.form);
            // }
          },
          {
            label: '是否默认加载数据',
            span: 16,
            offset: 4,
            labelWidth: 150,
            prop: 'isDefaultLoad',
            type: 'switch',
            disabled: this.isViewStatus,
            value: true,
            formslot: true
            // change: (val) => {
            //   this.$emit('baseInfoChange', this.form);
            // }
          },
          {
            label: '备注',
            span: 16,
            offset: 4,
            labelWidth: 150,
            prop: 'zhCnContent',
            disabled: this.isViewStatus,
            blur: (val) => {
              this.$emit('baseInfoChange', this.form);
            }
          }
        ]
      }
    };
  },
  methods: {
    handleChangeSwitch() {
      this.$emit('baseInfoChange', this.form);
    }
  }
};
</script>

<style scoped></style>
